<template>
    <div>
        <global-tables
                :total="total"
                :list="list"
                :loading="loading"
                :columns="columns"
                :current="search.Page"
                @changePage="handleChangePage"
                @handleAllSelect="handleAllSelect"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input type="text" style="width:220px" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword"
                                   placeholder="请输入商品信息 / 供货商 / 采购单">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
    </div>
</template>

<script>
    /**
     * 进货批次
     */
    import {cyclicRouting, getdate} from '@/util';
    import {getModulePermission} from '@/api/user';
    import {getTablesList} from './service';
    import GlobalTables from '@/components/GlobalTables';

    export default {
        name: 'PurchaseBatch',
        components: {
            GlobalTables,
        },
        data() {
            return {
                list: [],
                itemId: 0,
                allSelectArr: null,
                loading: true,
                formItem: {},
                ruleValidate: {},
                total: 0,
                search: {
                    keyword: '',
                    pageindex: 1,
                    pagesize: 10
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '商品图片',
                        width: 100,
                        render: (h, params) => {
                            const {PictureSmall} = params.row;
                            return h('div', [
                                h('Avatar', {
                                    props: {
                                        src: PictureSmall,
                                        shape: 'square',
                                        size: 'large'
                                    },
                                    style: {
                                        margin: '5px 0'
                                    }
                                })
                            ]);
                        }

                    },
                    {
                        title: '商品名称',
                        render: (h, params) => {
                            const {PSName, PName} = params.row;
                            return h('div', [
                                h('p', {},
                                    `商品名称 (${PName ? PName : '无'})`
                                ),
                                h(
                                    'p',
                                    {
                                        style: {
                                            margin: '5px 0'
                                        }
                                    },
                                    `规格 (${PSName ? PSName : '无'})`
                                )
                            ]);
                        }
                    },
                    {
                        title: '商品编码',
                        width: '200px',
                        render: (h, params) => {
                            const {SKU, SupCode, BarCode} = params.row;
                            const data = {
                                SKU: SKU ? SKU : '',
                                SupCode: SupCode ? SupCode : '',
                                BarCode: BarCode ? BarCode : ''
                            };
                            return h('div', [
                                h(
                                    'p',
                                    {
                                        style: {
                                            margin: '5px 0'
                                        }
                                    },
                                    'SKU ' + data.SKU
                                ),
                                h('p', {}, '货号 ' + data.SupCode),
                                h(
                                    'p',
                                    {
                                        style: {
                                            margin: '5px 0'
                                        }
                                    },
                                    '条形码 ' + data.BarCode
                                )
                            ]);
                        }
                    },

                    {
                        title: '供货商',
                        render: (h, params) => {
                            const {SupplierCode, SupplierName} = params.row;
                            return h('div', [
                                h('p', {},
                                    `${SupplierName ? SupplierName : '无'}`
                                ),
                                h(
                                    'p',
                                    {
                                        style: {
                                            margin: '5px 0'
                                        }
                                    },
                                    `编码${SupplierCode ? SupplierCode : '无'}`
                                )
                            ]);
                        }

                    },

                    {
                        title: '采购单号',
                        key: 'OrderCode'
                    },

                    {
                        title: '成本',
                        key: 'Cost'
                    },
                    {
                        title: '订货数量',
                        key: 'Count'
                    },
                    {
                        title: '到货数量',
                        key: 'CountDown'
                    },
                    {
                        title: '到货时间',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                params.row.ArriveTime &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(new Date(params.row.ArriveTime).getTime())
                                )
                            ]);
                        }

                    },
                ]
            };
        },
        methods: {
            /* 关闭对话框 */
            handleClose() {
                this.isModal = false;
            },
            /* 表格数据请求 */
            getTablesListData() {
                const data = this.search;
                getTablesList(data).then(res => {
                    this.list = res.data.rows;
                    this.loading = false;
                    this.total = res.data.records;
                });
            },
            /* 表格查询 */
            handleSearch() {
                this.loading = true;
                this.getTablesListData();
            },
            /* 表格分页方法 */
            handleChangePage(type, page) {
                this.loading = true;
                if (type == 'page') {
                    this.search.pageindex = page;
                    this.getTablesListData();
                } else {
                    this.search.pagesize = page;
                    this.getTablesListData();
                }
            },
            /* 对话框 */
            handleBtnClick(item, type) {
                this.itemId = item.ID;
                document.write('未开发', type)
            },
            /* 表单数据 */
            initFormItem() {
                return {};
            },
            /* 复选框选中 */
            handleAllSelect(list) {
                let arr = [];
                for (let item in list) {
                    arr.push(list[item].ID);
                    arr.join(',');
                }
                arr = arr.join(',');
                this.allSelectArr = arr;
            }
        },
        mounted() {
            /* 获取菜单的id */
            cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'view') {
                            this.isView = true;
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData();
                });
            });
        }
    };
</script>

<style>
</style>
